<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.imgName" placeholder="请输入轮播图名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.type"
            placeholder="请选择类型"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button type="warning" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="btn-list">
        <el-button @click="handleCreate">新建轮播图</el-button>
        <el-button type="danger" @click="handleDelete" :disabled="!multipleSelection.length > 0">批量删除</el-button>
        <el-button type="success" @click="handleRefresh">同步缓存</el-button>
      </div>

      <el-table :data="tableData" style="width: 100%" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="imgName" label="名称" align="center"/>
        <el-table-column property="imgUrl" label="图片" align="center">
          <template #default="scope">
            <el-image style="width: 50px;height: 50px;" :src="scope.row.imgUrl" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column property="isShow" label="状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.isShow" type="primary">显示</el-tag>
            <el-tag v-else type="success">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="sort" label="排序" align="center" />
        <el-table-column property="pageUrl" label="链接" align="center" />
        <el-table-column property="type" label="类型" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.type === 0" type="info">轮播图</el-tag>
            <el-tag v-if="scope.row.type === 1" type="warning">首页导航组</el-tag>
            <el-tag v-if="scope.row.type === 2" type="danger">底部导航组</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="createTime" label="创建日期" align="center" />
        <el-table-column property="updateTime" label="修改日期" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleEdit(scope.row)">
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              link
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        size="default"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <carousel-add-or-update ref="carouselAddOrUpdateRef" @refreshDataList="handleQuery"></carousel-add-or-update>
    </el-card>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { showMessage } from '~/utils/my-notification'
  import { ElMessageBox } from 'element-plus'
  import CarouselAddOrUpdate from './carousel-add-or-update.vue'
  import { tableList, batchRemove, refreshRedis } from '~/api/front/carousel.js'

  const currentPage = ref(1)
  const pageSize = ref(20)
  const background = ref(false)
  const disabled = ref(false)
  const total = ref(0)
  const multipleSelection = ref([])
  const carouselAddOrUpdateRef = ref(null)
  const tableData = ref([])
  const formInline = reactive({
    imgName: ''
  })
  const typeOptions = [
    { id: 0, name: '轮播图'},
    { id: 1, name: '首页导航组'},
    { id: 2, name: '底部导航组'}
  ]

  handleQuery()
  // 查询
  function handleQuery() {
    formInline.page = currentPage.value
    formInline.limit = pageSize.value
    tableList(formInline).then(res => {
      if(res && res.data.code === 200) {
        const datas = res.data.data.records
        tableData.value = datas
        total.value = res.data.data.total
      }
    })
  }
  // 重置
  function handleReset() {
    formInline.imgName = ''
  }
  // 新建轮播图
  function handleCreate() {
    if(carouselAddOrUpdateRef.value) {
      carouselAddOrUpdateRef.value.init()
    }
  }
  // 批量删除
  function handleDelete(row) {
    let ids = []
    if(row.id) {
      ids = [row.id]
    } else {
      for(const user of multipleSelection.value) {
        ids.push(user.id)
      }
    }
    ElMessageBox.confirm(`确定对[id=${ids.join(',')}]进行[${row.id ? '删除' : '批量删除'}]操作?`, '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      batchRemove(ids).then(res => {
        if(res && res.data.code === 200) {
          showMessage('删除成功!')
          handleQuery()
        } else {
          showMessage('删除失败!', 'error')
        }
      }).catch(err => {
        showMessage('删除失败!', 'error')
      })
    }).catch(() => {

    })
  }
  // 修改
  function handleEdit(row) {
    if(carouselAddOrUpdateRef.value) {
      carouselAddOrUpdateRef.value.init(row.id)
    }
  }
  // 多选
  function handleSelectionChange(val) {
    multipleSelection.value = val
  }
  // 同步缓存
  function handleRefresh() {
    ElMessageBox.confirm(`确定进行缓存同步吗?`, '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      refreshRedis().then(res => {
        if(res && res.data.code === 200) {
          showMessage('同步完成')
        } else {
          showMessage('同步失败', 'error')
        }
      })
    }).catch(() => {

    })
    
  }

  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val
    handleQuery()
  }
</script>
<style>
  .el-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
  }

  .btn-list {
    margin-bottom: 20px;
  }
</style>